<template>
	<div class="container-wrapper">
		<el-row>
			<el-col :xs="24" :sm="24" :lg="24">
				<datepickersummary></datepickersummary>
			</el-col>
		</el-row>
		<el-row>
				<el-col :xs="24" :sm="24" :lg="24" class="primary">测试实施</el-col>
		</el-row>
		<el-row>
				<el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
		</el-row>
		<deptautotest :params="filters" v-if="filters.radio"></deptautotest>
		<projectautotest :params="filters" v-else></projectautotest>
	</div>
</template>

<script>
import ProjectAutotest from '@/components/devops/modules/ProjectAutotest.vue';
import DeptAutotest from '@/components/devops/modules/DeptAutotest.vue';
import DatePickerSummary from '../summary/DatePickerSummary.vue';
import { mapState } from 'vuex';
export default {
	name: 'autotest',
	data() {
		return {};
	},
	components: {
		datepickersummary: DatePickerSummary,
		projectautotest: ProjectAutotest,
		deptautotest: DeptAutotest
	},
	methods: {
		init_datas: function(projectId, dates) {
			this.get_data_by_url(projectId, dates);
			this.get_table_data(projectId, dates);
		},
		fomatFloat(src, pos) {
			return Math.round(src * Math.pow(10, pos)) / Math.pow(10, pos);
		},
		generate_label_params: function(val1, val2, dataType, dataTitle, label) {
			if (typeof val1 === 'undefined') {
				val1 = 0;
			}
			var labelParam;
			if (dataType === 'time') {
				var standardTime = val2[1] * 60;
				if (val1) {
					if (val2[0]) {
						labelParam = {
							type: label,
							title: dataTitle,
							num: this.formatSeconds(val1),
							status: val1 > standardTime ? 'reach' : 'down',
							difference:
								val1 > standardTime
									? ''
									: this.formatSeconds(standardTime - val1)
						};
					} else {
						labelParam = {
							type: label,
							title: dataTitle,
							num: this.formatSeconds(val1),
							status: val1 > standardTime ? 'up' : 'reach',
							difference:
								val1 > standardTime
									? this.formatSeconds(val1 - standardTime)
									: ''
						};
					}
				} else {
					labelParam = {
						type: label,
						title: dataTitle,
						num: this.formatSeconds(val1),
						status: 'reach',
						difference: ''
					};
				}
				return labelParam;
			} else if (dataType === 'percent') {
				if (val1) {
					if (val2[0]) {
						labelParam = {
							type: label,
							title: dataTitle,
							status: val1 > val2[1] ? 'reach' : 'down',
							difference:
								val1 > val2[1] ? '' : this.fomatFloat(val2[1] - val1, 2) + '%',
							num: this.fomatFloat(val1, 2)
						};
					} else {
						labelParam = {
							type: label,
							title: dataTitle,
							status: val1 > val2[1] ? 'up' : 'reach',
							difference:
								val1 > val2[1] ? this.fomatFloat(val1 - val2[1], 2) + '%' : '',
							num: this.fomatFloat(val1, 2)
						};
					}
				} else {
					labelParam = {
						type: label,
						title: dataTitle,
						status: 'reach',
						difference: '',
						num: this.fomatFloat(val1, 2)
					};
				}
				return labelParam;
			} else if (dataType === 'frequency') {
				if (val1) {
					if (val2[0]) {
						labelParam = {
							type: label,
							title: dataTitle,
							num: this.fomatFloat(val1, 2),
							status: val1 > val2[1] ? 'reach' : 'down',
							difference:
								val1 > val2[1] ? '' : this.fomatFloat(val2[1] - val1, 2)
						};
					} else {
						labelParam = {
							type: label,
							title: dataTitle,
							num: this.fomatFloat(val1, 2),
							status: val1 > val2[1] ? 'up' : 'reach',
							difference:
								val1 > val2[1] ? this.fomatFloat(val1 - val2[1], 2) : ''
						};
					}
				} else {
					labelParam = {
						type: label,
						title: dataTitle,
						num: this.fomatFloat(val1, 2),
						status: 'reach',
						difference: ''
					};
				}
				return labelParam;
			} else if (dataType === 'multiple') {
				if (val1) {
					if (val2[0]) {
						labelParam = {
							type: label,
							title: dataTitle,
							num: this.fomatFloat(val1, 2),
							status: val1 > val2[1] ? 'reach' : 'down',
							difference:
								val1 > val2[1] ? '' : this.fomatFloat(val2[1] - val1, 2)
						};
					} else {
						labelParam = {
							type: label,
							title: dataTitle,
							num: this.fomatFloat(val1, 2),
							status: val1 > val2[1] ? 'up' : 'reach',
							difference:
								val1 > val2[1] ? this.fomatFloat(val1 - val2[1], 2) : ''
						};
					}
				} else {
					labelParam = {
						type: label,
						title: dataTitle,
						num: this.fomatFloat(val1, 2),
						status: 'reach',
						difference: ''
					};
				}
				return labelParam;
			} else {
				labelParam = {
					type: label,
					title: dataTitle,
					num: this.fomatFloat(val1, 2),
					status: 'reach',
					difference: ''
				};
				return labelParam;
			}
		},
		formatSeconds(value) {
			if (isNaN(value)) {
				value = 0;
			}
			var theTime = parseInt(value); // 秒
			var theTime1 = 0; // 分
			var theTime2 = 0; // 小时
			var theTime3 = 0; // 天
			if (theTime > 60) {
				theTime1 = parseInt(theTime / 60);
				theTime = parseInt(theTime % 60);
				if (theTime1 > 60) {
					theTime2 = parseInt(theTime1 / 60);
					theTime1 = parseInt(theTime1 % 60);
					if (theTime2 > 24) {
						theTime3 = parseInt(theTime2 / 24);
						theTime2 = parseInt(theTime2 % 24);
					}
				}
			}
			var result = '' + parseInt(theTime) + '秒';
			if (theTime1 > 0) {
				result = '' + parseInt(theTime1) + '分' + result;
			}
			if (theTime2 > 0) {
				result = '' + parseInt(theTime2) + '时' + result;
			}
			if (theTime3 > 0) {
				result = '' + parseInt(theTime3) + '天' + result;
			}
			return result;
		},
		filterObject: function() {
			console.log('111')
		},
		activeTab(index) {
			this.tabNum = index;
		},
		viewDetail(index, row) {
			let routeData = this.$router.resolve({
				path:
					'/project/' +
					this.filters.projectId +
					'/devops/detail/' +
					this.filters.project +
					'_@_' +
					row.update_date +
					'_@_autotest'
			});
			window.open(routeData.href, '_blank');
		},
		update_ui: function() {
			setTimeout(this.$refs.autotest_pie.draw, 100);
			this.first = false;
		},
		sortChange: function(val) {
			var key = val['prop'];
			var compare1 = function(obj1, obj2) {
				var val1 = obj1[key];
				var val2 = obj2[key];
				if (val1 < val2) {
					return -1;
				} else if (val1 > val2) {
					return 1;
				} else {
					return 0;
				}
			};
			var compare2 = function(obj1, obj2) {
				var val1 = obj1[key];
				var val2 = obj2[key];
				if (val1 < val2) {
					return 1;
				} else if (val1 > val2) {
					return -1;
				} else {
					return 0;
				}
			};
			var arr = this.table_auto_data;
			if (val['order'] === 'ascending') {
				this.pagingData(arr.sort(compare1));
			} else if (val['order'] === 'descending') {
				this.pagingData(arr.sort(compare2));
			} else {
				key = 'update_date';
				this.pagingData(arr.sort(compare2));
			}
		},
		handleSizeChange: function(size) {
			this.currentSize = size;
			this.pagingData(this.table_auto_data);
		},
		handleCurrentChange: function(page) {
			this.currentPage = page;
			this.pagingData(this.table_auto_data);
		},
		get_table_data: function(projectId, dates) {
			this.table_auto_data = [];
			this.currentData = [];
			this.autoData.rows = [];
			this.dataEmpty = true;
			var self = this;
			this.$axios
				.get(
					process.env.VUE_APP_KANBAN_HOST +
						'/api/devops/automate/table_summary?projectId=' +
						projectId +
						'&date=' +
						dates,
						{headers: getHeader()}
				)
				.then(function(response) {
					if (response.status == 200) {
						if (response.data.code === 200) {
							var data = response.data.data;
							for (var i = 0; i < data.length; i++) {
								var tableDict = {
									update_date: data[i]['update_date'],
									test_count: data[i]['test_count'] + '次',
									daily_test_count: data[i]['daily_test_count'] + '次',
									verify_test_count: data[i]['verify_test_count'] + '次',
									release_test_count: data[i]['release_test_count'] + '次',
									av_pass_rate: data[i]['av_pass_rate'] + '%',
									av_exec_rate: data[i]['av_exec_rate'] + '%'
								};
								self.table_auto_data.push(tableDict);
							}
							self.autoData.rows = data.reverse();
							self.dataEmpty = false;
							self.totalCount = self.table_auto_data.length;
							self.currentPage = 1;
							self.currentSize = 10;
							if (self.totalCount === 0) {
								self.currentData = [];
								self.dataEmpty = true;
							} else {
								self.pagingData(self.table_auto_data);
							}
						}
					}
				});
		},
		get_data_by_url: function(projectId, dates) {
			var self = this;
			self.refreshing_project_kanban = true;
			this.$axios
				.get(
					process.env.VUE_APP_KANBAN_HOST +
						'/api/devops/automate/summary?projectId=' +
						projectId +
						'&date=' +
						dates,
						{headers: getHeader()}
				)
				.then(function(response) {
					if (response.status == 200) {
						if (response.data.code === 200) {
							var data = response.data.data;
							self.refreshing_project_kanban = false;
							self.labelsData = data;
						}
					}
				})
				.catch(function(err) {
					self.refreshing_project_kanban = false;
					console.log(err);
				});
		},
		pagingData: function(originData) {
			var count = this.currentPage * this.currentSize;
			if (this.totalCount >= count) {
				this.currentData = originData.slice(
					(this.currentPage - 1) * this.currentSize,
					count
				);
			} else if (this.totalCount < count) {
				this.currentData = originData.slice(
					(this.currentPage - 1) * this.currentSize,
					this.totalCount
				);
			}
		},
	},
	computed: {
		...mapState({
			filters: state => state.filters
		})
	}
};
</script>

<style scoped lang="scss">
@import '../../assets/common/common.scss';
.container-wrapper >>> .el-tabs--border-card {
	background: none
}
.container-wrapper{
		padding: 32px;
		background-color: rgb(240, 242, 245);
		position: relative;
}
.border{
		box-sizing: content-box;
		height: 0;
		overflow: visible;
		margin-top: 1rem;
		margin-bottom: 1rem;
		border: 0;
		border-top: 1px solid rgba(0,0,0,.1);
}
.primary{
		color: #409EFF;
		font-size: 30px;
		margin-top: 20px;
		margin-bottom: 10px;
		font-weight: 400;
}
.demo-table-expand {
	font-size: 0;
}
.demo-table-expand label {
	width: 160px;
	color: #99a9bf;
}
.demo-table-expand .el-form-item {
	margin-right: 0;
	margin-bottom: 0;
	width: 50%;
}
</style>
